<template>
  <div class="nav-container">
    <ul class="nav">
      <NavItem v-for="(item, index) in menuItems" :key="index" :title="item.title" :route="item.route"
        :sub-items="item.subItems" />
    </ul>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import NavItem from "./NavItem.vue";

const menuItems = [
  { title: "首页", route: "/", subItems: [] },
  {
    title: "走进众延",
    route: "/about",
    subItems: [
      { title: "众延概括", route: "/about/summary" },  // 完整的路径
      { title: "众延文化", route: "/about/culture" }   // 完整的路径
    ]
  },
  {
    title: "众延资讯",
    route: "/news",
    subItems: [
      { title: "众延动态", route: "/news/dynamics" },
      { title: "行业资讯", route: "/news/industry" }
    ]
  },
  {
    title: "延保信息",
    route: "/warranty",
    subItems: [
      { title: "延保概念", route: "/warranty/concept" },
      { title: "延保范围", route: "/warranty/scope" },
      { title: "服务品牌", route: "/warranty/brands" }
    ]
  },
  {
    title: "客户服务",
    route: "/service",
    subItems: [
      { title: "业务须知", route: "/service/notice" },
      { title: "服务流程", route: "/service/process" },
      { title: "汽车保养FAQ", route: "/service/faq" }
    ]
  },
  {
    title: "招贤纳士",
    route: "/jobs",
    subItems: [
      { title: "职位列表", route: "/jobs/list" },
      { title: "投递简历", route: "/jobs/resume" }
    ]
  },
  { title: "联系我们", route: "/contact", subItems: [] }
]
// 组件挂载时如果是根路径，确保重定向到首页
// onMounted(() => {
//   if (window.location.pathname === "/") {
//     router.push("/");
//   }
// });
</script>

<style scoped>
.nav-container {
  width: 100%;
  background-color: rgb(14, 34, 95);
}

.nav {
  display: flex;
  list-style: none;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0;
}

/* 移除所有可能的间隙 */
.nav {
  font-size: 0;
}
</style>
